<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>学院列表</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>

	<body>

		<div class="c">
			<h1>学员信息表</h1>
			<h2>添加</h2>
			<input type="text" placeholder="姓名" id="n">
			<select id="s">
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
			<input type="number" placeholder="年龄" id="a">
			<button id="btn">添加</button>
		</div>
		<div class="h">
			<h2>列表</h2>
			<ul>
				<li><a href="">姓名</a></li>
				<li><a href="">性别</a></li>
				<li><a href="">年龄</a></li>
			</ul>
		</div>
		<div class="t">
			<ul id="list"></ul>
		</div>

		<script>
			function loadXMLDoc() {
				var xmlhttp;
				if(window.XMLHttpRequest) {
					xmlhttp = new XMLHttpRequest();
				} else {
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						var json = JSON.parse(xmlhttp.responseText);
						console.log(json);
						for(let i = 0; i < json.data.length; i++) {
							var li = document.createElement("li");
							var spanName = document.createElement("span");
							spanName.innerHTML = json.data[i].studentName;
							var spanSex = document.createElement("span");
							spanSex.innerHTML = json.data[i].sex;
							var spanAge = document.createElement("span");
							spanAge.innerHTML = json.data[i].age;

							li.appendChild(spanName);
							li.appendChild(spanSex);
							li.appendChild(spanAge);

							document.querySelector("#list").appendChild(li);
						}
					}
				}
				xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student", true);
				xmlhttp.send();
			}
			loadXMLDoc();

			document.querySelector("#btn").addEventListener("click", function() {
				var n = document.querySelector("#n").value;
				console.log(n);
				var s = document.querySelector("#s").value;
				console.log(s);
				var a = document.querySelector("#a").value;
				console.log(a);

				var xmlhttp;
				if(window.XMLHttpRequest) {
					//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
					xmlhttp = new XMLHttpRequest();
				} else {
					// IE6, IE5 浏览器执行代码
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						console.log(xmlhttp.responseText);
						//重要的

						loadXMLDoc();

						//document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
					}
				}
				xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addstudent?studentName=" + n + "&sex=" + s + "&age=" + a, true);
				xmlhttp.send();
			})
		</script>

	</body>

</html>